<template>
    <div>
        <Header></Header>
        <div class="box">
            <div class="news" v-for="item in newsList" :key="item.id">
                <img :src="item.pic" />
                <h3 v-html="item.title"></h3>
                <p class="detail">{{item.descript}}</p>
                <p>
                    <van-button round type="info" @click="gotoDetail(item.id)">查看详情</van-button>
                </p>
            </div>            
        </div>

    </div>
</template>

<script>
import Header from "@/components/Header/Header";
export default {
    components: {
        Header,
    },
    data() {
        return {
            newsList: [],
        };
    },
    methods: {
        gotoDetail(id){
            this.$router.push({path:'/newsDetail',query:{id:id}})
        }
    },
    mounted() {
        this.$API.getNewsList().then((res) => {
            console.log(res.data.data);
            this.newsList = res.data.data;
        });
    },
};
</script>
<style lang="scss">
.box{
    width: 100%;
    height: 94vh;
    overflow: auto;
}
.news {
    margin-bottom: 1vh;
    width: 100%;
    height: 30vh;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    color:white;
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    h3{
        margin-top: 4vh;
        width: 100%;
    }
    .detail{
        text-align: center;
        height: 4vh;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    p{
        width: 100%;
        button {
            height: 6vh;
            color: white;
            border: 1px solid white;
            background: none;
        }
    }
}
</style>